<html>
  <head>
    <script src="https://cdn.jsdelivr.net/gh/skulpt/skulpt-dist/skulpt.min.js" type="text/javascript"></script>
    <script src="https://cdn.jsdelivr.net/gh/skulpt/skulpt-dist/skulpt-stdlib.js" type="text/javascript"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.2/codemirror.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.2/mode/python/python.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.2/codemirror.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/codemirror/5.59.2/theme/idea.min.css" rel="stylesheet">
    <script src="./dist/main.js"></script>
    <style>
      .CodeMirror {
        height: 800px;
      }
      body {
        margin: 0;
      }
      #stage {
        position: fixed;
        left: 610px;
        top: 0;
        width: 500px;
        height: 400px;
        background: #000;
        border: 1px solid #ccc;
      }
    </style>
  </head>

  <body>
    <form>
      <div style="border: 1px solid #ccc;width: 600px;">
        <textarea id="yourcode" cols="80" rows="80">

</textarea>
      </div>
      
<br />
      <button type="button" id="run" style="width: 100px;height:30px;background:#1a46a7;border: 0; color: #fff;">运行</button>
    </form>
    <pre id="output"></pre>
    <div id="stage"></div>
    
    <script>
      var editor = CodeMirror.fromTextArea(document.getElementById('yourcode'), {
        lineNumbers: true,
        mode:  "python",
        theme: "idea",
      });
      // 配置海龟容器
      (Sk.TurtleGraphics || (Sk.TurtleGraphics = {})).target = 'stage';
      var externalLibs = {
      };
      function outf(text) {
        var mypre = document.getElementById("output");
        mypre.innerHTML = mypre.innerHTML + text;
      }
      function builtinRead(file) {
        console.log("Attempting file: " + Sk.ffi.remapToJs(file));
        
        if (externalLibs[file] !== undefined) {
          return Sk.misceval.promiseToSuspension(
            fetch(externalLibs[file]).then(
              function (resp){ return resp.text(); }
            ));
        }
        
        if (Sk.builtinFiles === undefined || Sk.builtinFiles.files[file] === undefined) {
          throw "File not found: '" + file + "'";
        }
        
        return Sk.builtinFiles.files[file];
      }
      // 配置容器
      PyGameZero.setContainer(document.getElementById('stage'))
      fetch('./test/animate.py').then((res) =>  res.text()).then((text) => {
        editor.setValue(text);
        
        var mypre = document.getElementById("output");
        mypre.innerHTML = "";
        Sk.pre = "output";
        Sk.configure({
          output: outf,
          read: PyGameZero.usePyGameZero(builtinRead),
          __future__: Sk.python3,
        });
        document.getElementById('run').onclick = function() {
          PyGameZero.reset();
          
          var prog = editor.getValue();
          var myPromise = Sk.misceval.asyncToPromise(function() {
            return Sk.importMainWithBody("<stdin>", false, prog, true);
          });
          myPromise.then(
            function(mod) {
              console.log("success");
            },
            function(err) {
              console.error(err.nativeError);
              var mypre = document.getElementById("output");
              mypre.innerHTML = mypre.innerHTML + err;
            }
          );
        }
      })
      
    </script>
  </body>
</html>
